<template>
  <div class="login">
    <el-card class="box-card" shadow="always">
      <div
        style="
          padding: 40px 0px 60px 0px;
          text-align: center;
          color: #409eff;
          font-size: 50px;
          font-weight: bold;
          letter-spacing: 3px;
        "
      >
        云协同OA信息系统
      </div>
      <el-form
        ref="loginForm"
        size="large"
        label-position="right"
        label-width="60px"
        :model="loginData"        
        style="width: 360px; margin: 0px auto"
      >
        <el-form-item label="账号" prop="u_id">
          <el-input v-model="loginData.u_id"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="u_id">
          <el-input v-model="loginData.u_pwd" type="password" show-password ></el-input>
        </el-form-item>
      </el-form>
      <div style="text-align: right; width: 360px; margin: 40px auto 0px">
        <el-button
          @click="login"
          type="primary"
          size="large"
          style="width: 300px"
          >登录</el-button
        >
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
//import axios from 'axios';
import {post} from '@/request'
import { ElMessage} from 'element-plus'
import { useRouter } from 'vue-router';



const router = useRouter();//获取路由器

const loginData = reactive({
    u_id: '',
    u_pwd: ''
});

const login = async () => {
    const result = await post('/security/login', loginData);

    //登录成功

    localStorage.setItem("X-TOKEN",result.data);//将令牌存储于本地


    router.push('/home');//跳转路由
    ElMessage({
        message: '登录成功！',
        type: 'success',
    });
    //const response = await axios.post('/api/security/login', loginData);
    //const result = response.data;
    // if (result.success) {
    //     router.push('/info/emp');//跳转路由
    //     ElMessage({
    //         message: '登录成功！',
    //         type: 'success',
    //     })
    // } else {
    //     ElMessage({
    //         message: result.message,
    //         type: 'error',
    //     })
    // }
};

</script>

<style scoped>
.login {
  background-image: url("@/assets/sign-bg.jpeg");

  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;

  display: flex;
  justify-content: center;
  align-items: center;
}
.box-card {
  width: 800px;
  height: 600px;
  opacity: 0.92;
  /* display:flex;
  flex-direction: column;
  align-items: center; */
}
</style>